<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>


    <title>H+ 后台主题UI框架 - 收件箱</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台"/>
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术"/>

    <link rel="shortcut icon" th:href="favicon.ico"/>
    <link th:href="@{/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.css?v=4.4.0}" rel="stylesheet"/>
    <link th:href="@{/css/plugins/iCheck/custom.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet"/>
    <link th:href="@{/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css}" rel="stylesheet"/>
    <style>
        .table > tbody > tr > td {
            padding: 0px;
            border: none;
        }

        .table > thead > tr > th {
            padding: 0px;
        }

        .table > thead > tr > th:first-child {
            padding: 8px;
        }

        .table > thead > tr > th div {
            width: 95%;
            border-right: 1px solid rgba(200, 200, 200, .7);
        }

        .table > thead > tr > th:first-child div {
            border-right: 0;
        }
    </style>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-2">
            <div class="ibox float-e-margins">
                <div class="ibox-content mailbox-content">
                    <div class="file-manager">
                        <a class="btn btn-block btn-primary compose-mail" href="#">上传</a>
                        <div class="space-25"></div>
                        <h5>文件夹</h5>
                        <ul class="folder-list m-b-md" style="padding: 0">
                            <li>
                                <a href="#"> <i class="fa fa-folder "></i> 个人文件夹 <span
                                        class="label label-warning pull-right"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#"> <i class="fa fa-folder-open"></i> 共享文件夹</a>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-sm-10 animated fadeInRight">
            <div class="mail-box-header">

                <form method="get" action="index.html" class="pull-right mail-search">
                    <div class="input-group">
                        <input type="text" class="form-control input-sm" name="search" placeholder="文件夹或文件"/>
                        <div class="input-group-btn">
                            <button type="submit" class="btn btn-sm btn-primary">
                                搜索
                            </button>
                        </div>
                    </div>
                </form>
                <h3>
                    个人文件夹
                </h3>
                <div class="btn-group m-t-md pull-left">
                    <button class="btn btn-white btn-sm"><i class="fa fa-arrow-left"></i>
                    </button>
                    <button class="btn btn-white btn-sm"><i class="fa fa-arrow-right"></i>
                    </button>
                </div>
                <div class="btn-group m-t-md pull-left">
                    <button class="btn btn-white btn-sm">新建文件夹
                    </button>
                    <button class="btn btn-white btn-sm">历史记录
                    </button>
                </div>
                <div class="mail-tools tooltip-demo m-t-md pull-right">
                    <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left" title="刷新文件列表"><i
                            class="fa fa-refresh"></i></button>
                    <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="下载"><i
                            class="fa fa-download"></i>
                    </button>
                    <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="删除文件"><i
                            class="fa fa-trash-o"></i>
                    </button>
                </div>
        </div>
        <div class="mail-box" style="padding-left: 10px">

            <table class="table table-hover table-mail">
                <thead>
                <th>
                    <div class="checkbox checkbox-primary">
                        <input id="0" type="checkbox"/>
                        <label for="0"></label>
                    </div>
                </th>
                <th>
                    <div>文件名</div>
                </th>
                <th>
                    <div>文件类型</div>
                </th>
                <th>
                    <div>文件大小</div>
                </th>
                <th>
                    <div>上传时间</div>
                </th>
                </thead>
                <tbody>
                <tr class="read" th:each="file,stat: ${fileList}">
                    <td class="check-mail">
                        <div class="checkbox ">
                            <input id="1" type="checkbox"/>
                            <label for="1"></label>
                        </div>
                    </td>
                    <td class="mail-ontact">
                        <i class="fa fa-folder-o"></i>
                        <a href="#" th:text="file.filename"></a>
                    </td>
                    <td class="mail-ontact"><a href="#" th:text="file.fileType"></a>
                    </td>
                    <td class="" th:text="${file.fileSize}">
                    </td>
                    <td class="mail-date" th:text="file.fileUploadTime"></td>
                </tr>
                <tr class="read">
                    <td class="check-mail">
                        <div class="checkbox">
                            <input id="2" type="checkbox"/>
                            <label for="2"></label>
                        </div>
                    </td>
                    <td class="mail-ontact">
                        <i class="fa fa-folder-o"></i>
                        <a href="#">虚拟机</a>
                    </td>
                    <td class="mail-ontact"><a href="#">文件夹</a>
                    </td>
                    <td class="">50
                    </td>
                    <td class="mail-date">昨天 10:20</td>
                </tr>
                <tr class="read">
                    <td class="check-mail">
                        <div class="checkbox">
                            <input id="3" type="checkbox"/>
                            <label for="3"></label>
                        </div>
                    </td>
                    <td class="mail-ontact">
                        <i class="fa fa-folder-o"></i>
                        <a href="#">java</a>
                    </td>
                    <td class="mail-ontact"><a href="#">文件夹</a>
                    </td>
                    <td class="">500 KB
                    </td>
                    <td class="mail-date">昨天 10:20</td>
                </tr>
                <tr class="read">
                    <td class="check-mail">
                        <div class="checkbox">
                            <input id="4" type="checkbox"/>
                            <label for="4"></label>
                        </div>
                    </td>
                    <td class="mail-ontact">
                        <i class="fa fa-file-photo-o"></i>
                        <a href="#">vue.js</a>
                    </td>
                    <td class="mail-ontact"><a href="#">JS</a>
                    </td>
                    <td class="">50 KB
                    </td>
                    <td class="mail-date">昨天 10:20</td>
                </tr>
                <tr class="read">
                    <td class="check-mail">
                        <div class="checkbox">
                            <input id="5" type="checkbox"/>
                            <label for="5"></label>
                        </div>
                    </td>
                    <td class="mail-ontact">
                        <i class="fa fa-file-photo-o"></i>
                        <a href="#">vue.js</a>
                    </td>
                    <td class="mail-ontact"><a href="#">JS</a>
                    </td>
                    <td class="">50 KB
                    </td>
                    <td class="mail-date">昨天 10:20</td>
                </tr>
                <tr class="read">
                    <td class="check-mail">
                        <div class="checkbox">
                            <input id="6" type="checkbox"/>
                            <label for="6"></label>
                        </div>
                    </td>
                    <td class="mail-ontact">
                        <i class="fa fa-file-photo-o"></i>
                        <a href="#">vue.js</a>
                    </td>
                    <td class="mail-ontact"><a href="#">JS</a>
                    </td>
                    <td class="">50 KB
                    </td>
                    <td class="mail-date">昨天 10:20</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>


<!-- 全局js -->
<script th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>


<!-- 自定义js -->
<script th:src="@{/js/content.js?v=1.0.0}"></script>


<!-- iCheck -->
<script th:src="@{/js/plugins/iCheck/icheck.min.js}"></script>
<!-- Chosen -->
<script th:src="@{/js/plugins/chosen/chosen.jquery.js}"></script>
<script>

</script>
</body>

</html>
